<template>
    <el-form label-width="150px" title="Request">
        <div style="display: flex">
            <div class="flex-content">
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.requestNo')">
                    <span>{{quest.requestNo}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.requestDate')">
                   <span>{{quest.requestDate}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.requestBy')">
                    <span>{{quest.requestBy}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.operator')">
                    <span>{{quest.operatorName}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.customer')">
                    <span>{{quest.customerName}}</span>
                </el-form-item>
            </div>
            <div class="flex-content">
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.plateNum')">
                    <span>{{quest.plateNum}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.unit')">
                   <span>{{quest.unitModel}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.sn')">
                   <span>{{quest.sn}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.deliveryTime')">
                   <span>{{quest.deliveryTime}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.hmkm')">
                    <span>{{quest.hmKm}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.serviceType')">
                    <span>{{quest.serviceType}}</span>
                </el-form-item>
            </div>
            <div class="flex-content">
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.problem')">
                    <div class="problem" v-for="(item,index) in quest.problems" :key="index"
                         style="position: relative;margin-bottom: 10px;">
                        <div style="font-size: 16px;text-align: center">{{index+1}}.{{item.problemDescription}}
                        </div>
                        <div v-if="item.problemPhoto">
                            <div v-for="pic in item.problemPhoto" :key="pic">
                                <a :href="pic" target="_blank">{{pic | getName}}</a>
                            </div>
                        </div>
                        <div v-if="item.problemVideo">
                            <div v-for="vid in item.problemVideo" :key="vid">
                                <a :href="vid" target="_blank">{{vid | getName}}</a>
                            </div>
                        </div>
                        <div v-if="item.problemFile">
                            <div v-for="file in item.problemFile" :key="file">
                                <a :href="file" target="_blank">{{file | getName}}</a>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item style="margin-bottom:0" :label="$t('serviceRequest.notes')">
                    <span>{{quest.note}}</span>
                </el-form-item>
            </div>
        </div>
    </el-form>
</template>

<script>
    import {getFileName} from "../../util";

    export default {
        name: "quest-show",
        filters:{
            getName(name) {
                return getFileName(name)
            }
        },
        props:{
            quest:Object
        }
    }
</script>

<style scoped lang="scss">

</style>